<template>
	<view class="foodPayment">
		<view class="foodPayment_content">
			<view class="foodPayment_list">
				<!-- 科贸商品 -->
				<block>
					<!-- 地址 -->

					<view class="address flex" @tap="selectAddress" v-if="addressList">
						<image class="address_img" src="../../static/my/icon_shdz.png" mode=""></image>

						<view class="address_main">
							<view>
								<text class="sjr_name">{{addressList.realName}}</text>
								<text class="sjr_phone">{{addressList.phone}}</text>
							</view>
							<view class="address_j">{{addressList.province}}{{addressList.city}}{{addressList.district}}
							</view>
						</view>

						<view>
							<image style="width: 30rpx;height: 30rpx;" src="@/static/com/icon_more.png" mode=""></image>

						</view>
					</view>
					<view class="address flex" @tap="selectAddress" v-else>
						<view class="no-address">
							<image class="address_img" src="../../static/my/icon_shdz.png" mode=""></image>
							暂无收获去添加地址
						</view>

					</view>
					<!-- 地址 END -->
					<view class="food_item " v-for="(item,index) in dataInfo.orderDetailList" :key="index">
						<block>
							<view class="food_meta">

								<view class="store-meta">
									<view class="item_img">
										<image :src="item.image" mode=""></image>
									</view>
									<view class="item_desc">
										<view class="d_t">
											<text>{{item.productName}}</text>

										</view>

										<view class="d_m">
											<text>{{item.sku}}</text>
											<!-- 		<text>周一至周日</text>
											<text>10:00-22:00</text> -->
										</view>
										<view class="d_b">
											<text>积分{{item.exchangePrice}}</text>
											<!-- <text>免预约</text> -->
											<text class="product-count">x1</text>
										</view>
									</view>
								</view>

							</view>

							<!-- 	<view class="buy_infrom" @tap="chooseDiscount(item)"
								v-if="(item.goods.length>1?v==item.goods.length-1:v==0)&&discountList.length!=0">
								<view class="buy_coupon" style="border-bottom: 0;" @tap="goDiscount">
									<text class="coupon_t">平台优惠券</text>
									<text class="coupon_m">{{item.ticket}}</text>
		
								</view>
							</view> -->
						</block>

					</view>


				</block>

				<!-- 购买优惠券 常规商品结算 -->

				<view class="buy_infrom">
					<view class="buy_coupon" style="border-bottom: 0;" @tap="goDiscount">
						<text class="coupon_t">运费</text>
						<text class="coupon_m">￥{{dataInfo.freightFee}}</text>
					</view>

				</view>
				<view class="buy_infrom">
					<view class="buy_coupon" style="border-bottom: 0;" @tap="goDiscount">
						<text class="coupon_t">当前积分</text>
						<text class="coupon_m">{{dataInfo.userIntegral}}</text>
					</view>

				</view>
				<!-- <view class="buy_infrom">
					<view class="buy_coupon" style="border-bottom: 0;" @tap="goDiscount">
						<text class="coupon_t">运费</text>
						<text class="coupon_m">￥10</text>
					</view>
					
				</view> -->

			</view>

		</view>
		<view class="footer">
			<view class="footer-btn" @click="submit">
				支付{{totalPrice}}积分兑换
				<text v-if="dataInfo.freightFee!=0">
					+{{dataInfo.freightFee}}元邮费兑换
				</text>

			</view>

		</view>
		<payment :payMode='payMode' :pay_close="pay_close" :types="scene" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='allPrice'></payment>
	</view>
</template>

<script>
	import payment from '@/components/payment/index.vue'
	import {
		getUserInfo,
		getAddressList
	} from '@/api/user.js';
	import {
		getorderpaymentjf
	} from '@/api/togeterRich/order.js'
	import {
		orderCreate,
		loadPreOrderApi,
		postOrderComputed,
	} from '@/api/order.js'
	export default {
		components: {
			payment
		},
		data() {
			return {
				orderNo: '',
				scene: '',
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				totalPrice: 0,
				dataInfo: {},
				discountList: [],
				preOrderNo: '',
				addressList: {},
				active: 0,
				addressId: ''
			}
		},
		watch: {
			// 监听值的变化
			addressList(newVal, oldVal) {
				this.computedPrice()
				console.log(newVal, oldVal, 'newVal, oldValnewVal, oldVal')
				// 在这里执行相应的操作
			}
		},

		onLoad(e) {

			console.log(e, ';eee')
			this.preOrderNo = e.preOrderNo
			this.init()
			this.getAddressList()
		},
		methods: {
			payClose: function() {
				this.pay_close = false;
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			onChangeFun() {

				uni.showModal({
					title: '支付成功',
					content: '支付成功',
					cancelText: "返回首页", // 取消按钮的文字  
					confirmText: "查看订单", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({

								url: '/pagesB/shoppingPoints/index?status=10'
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})


			},
			computedPrice: function() {
				// let shippingType = this.shippingType;
				postOrderComputed({
					addressId: this.addressList.id,
					useIntegral: true,
					couponId: this.couponId,
					shippingType: 1,
					preOrderNo: this.preOrderNo
				}).then(res => {
					this.totalPrice = res.data.totalIntegral
					console.log(res, '有价格嘛')
				})
			},
			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})
				loadPreOrderApi(this.preOrderNo).then(res => {
					console.log(res, 'ddd')

					this.dataInfo = res.data.orderInfoVo
					this.totalPrice = this.dataInfo.totalIntegral

				})

			},
			getAddressList: function() {
				let that = this;
				getAddressList({
					page: 1,
					limit: 5
				}).then(res => {
					this.addressList = res.data.list[0]
					return;
					console.log(res, '地址')
					// let addressList = res.data.list
					if (this.addressId != '') {
						res.data.list.map(ress => {
							if (ress.id = that.addressId) {
								this.addressList = ress
							}
						})
					} else {
						this.addressList = res.data.list[0]
					}
					// this.addressList = res.data.list[0];
					//处理默认选中项
					return;
					for (let i = 0, leng = addressList.length; i < leng; i++) {
						if (addressList[i].id == that.addressId) {
							that.active = i;
						}
					}
					that.$set(that, 'addressList', addressList);
					that.is_loading = false;
				})
			},
			getorderpaymentjfsubmit(data, uni) {
				data.scene = 0
				data.orderNo = uni
				getorderpaymentjf(data).then(res => {
					console.log(res, '我是支付了嘛？')
					this.onChangeFun(res)

				})
			},
			submit() {
				let data = {
					payChannel: 'routine',
					payType: "yue",
					preOrderNo: this.preOrderNo,
					shippingType: 1,
					realName: this.addressList.realName,
					phone: this.addressList.phone,
					addressId: this.addressList.id,
					useIntegral: true,
				}
				orderCreate(data).then(res => {
					console.log(res, '创建订单')
					this.orderNo = res.data.orderNo
					this.scene = 0
					this.getorderpaymentjfsubmit(data, res.data.orderNo)
					console.log("要走支付积分了")
					// this.goPay()

				})

				return;
				uni.showModal({
					title: '兑换成功',
					content: '快递信息可在"我的"-"积分订单"中查看',

					confirmText: "回首页", // 确认按钮的文字  
					showCancel: false, // 是否显示取消按钮，默认为 true
					confirmColor: '#46B681',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})

			},
			selectAddress() {
				let pageType = "pointPage"
				uni.navigateTo({
					url: `/pages/users/user_address_list/index?preOrderNo=${this.preOrderNo}&pageType=${pageType}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1;
		padding: 30rpx 0;

		.footer-btn {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
		}
	}

	.buy_coupon {
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.address {
		border-radius: 12rpx;
		margin: 15rpx 0;
		padding: 51rpx 21rpx;
		background-color: #fff;
		box-sizing: border-box;

		.address_img {
			width: 60rpx;
			height: 60rpx;
		}

		.address_main {
			flex: 1;
			margin: 0 50rpx 0 25rpx;

			.sjr_name {
				font-size: 28rpx;
				margin-right: 11rpx;
			}

			.sjr_phone {
				color: #999;
			}

			.address_j {
				margin-top: 16rpx;
				font-size: 22rpx;
			}
		}

		.icon-youjiantou1 {
			font-size: 24rpx;
			color: #999;
		}
	}

	.foodPayment {
		overflow: hidden !important;
		width: 100%;

		background-color: rgba(245, 249, 252, 1);

		.foodPayment_content {
			width: 100%;
			box-sizing: border-box;
			padding-right: 20rpx;
			padding-left: 20rpx;
			padding-bottom: 120rpx;

			.foodPayment_list {
				padding-top: 20rpx;

				.food_item {
					width: 100%;
					padding: 30rpx;
					border-radius: 12rpx;
					box-sizing: border-box;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// align-items: center;
					margin-bottom: 20rpx;

					.food_meta {
						display: flex;
						flex-direction: column;

						.store_info {
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
								margin-right: 10rpx;
							}
						}

						.store-meta {

							display: flex;

						}
					}

					.item_img {
						width: 140rpx;
						height: 120rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item_desc {
						flex: 1;
						margin-left: 18rpx;

						.d_t {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 限制在三行 */
							-webkit-box-orient: vertical;

							text {
								&:first-child {
									font-size: 26rpx;
									font-family: Source Han Sans CN;
									font-weight: 500;
									color: #333333;
								}


							}
						}

						.d_m {
							display: flex;
							margin: 16rpx 0 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 限制在三行 */
							-webkit-box-orient: vertical;

							text {
								margin-right: 15rpx;
								font-size: 20rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #999999;
							}
						}

						.d_b {
							display: flex;
							position: relative;

							text {
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: $maincolor;
								margin-right: 24rpx;



								&:last-child {
									position: absolute;
									right: 0;

									&::before {
										display: none;
									}
								}
							}

						}
					}
				}

				.buy_num {
					width: 100%;
					margin-top: 12rpx;
					padding: 26rpx 20rpx;
					border-radius: 8rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.buy-t {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.num_change {
						display: flex;
						align-items: center;

						image {
							width: 42rpx;
							height: 42rpx;
						}

						text {
							margin: 0 23rpx;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
				}



				.user_infrom {
					width: 100%;
					margin: 12rpx 0 20rpx;
					border-radius: 8rpx;
					background-color: #FFFFFF;
					box-sizing: border-box;
					padding: 0 20rpx 34rpx;
					display: flex;
					flex-direction: column;

					input {
						width: 80%;
					}

					.username {
						width: 100%;
						box-sizing: border-box;
						background: #FFFFFF;
						padding: 24rpx 0;
						border-bottom: 1px solid #EBEBEB;
						;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.name_t {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}

						.name_m {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}

					.userphone {
						width: 100%;
						box-sizing: border-box;
						background: #FFFFFF;
						padding: 24rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.userphone_t {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}

						.userphone_m {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}

					uni-textarea {
						height: 178rpx;
						width: 670rpx;
						box-sizing: border-box;
						padding: 20rpx;
						background: #F7F7F7;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}

				}
			}
		}



	}
</style>